<template>
	<view class="content">
		<view class="body">
			<up-navbar :title="t('Operating bank cards')" @leftClick="goWithdraw" :autoBack="true">
				<template #left>
				  <view class="nav-back-btn">
				    <image class="back-icon" src="../../../static/img/left.png"></image>
				  </view>
				</template>
			</up-navbar>
			
			<view class="top">
				<u-form>
					<u-form-item>
						<u-input v-model="baseData.cardForm.account_num" pattern="^\d+$" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Account Number')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model.trim="baseData.cardForm.holder_name" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Account Holder Name')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model="baseData.cardForm.ifsc" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text text="IFSC" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item v-if="platformNum===7">
						<u-input v-model="baseData.cardForm.accEmail" class="custom-input" inputAlign="right"
							placeholder="Email">
							<template #prefix>
								<up-text text="Email" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item v-if="platformNum===7">
						<u-input v-model="baseData.cardForm.acc_phone" class="custom-input" inputAlign="right"
							placeholder="phone">
							<template #prefix>
								<up-text text="phone" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="btn" @click="addBank">{{t('Save')}}</view>
		<a :href="baseData.aircraftUrl" target="_blank">
			<img style="width: 2rem;
				height: 2rem;
				position: fixed;
				bottom: 30vh;
				right:6px;
				z-index: 99999;" src="@/static/teltgram.png" />
		</a>
	</view>

</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive,ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'

	const { t } = useI18n();
	const platformNum=ref(0);
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		cardForm: {
			ifsc: '',
			holder_name: '',
			account_num: '',
			country:1,
			acc_phone:null,
			ac_type:1  ,
			platform:uni.getStorageSync('platform'),
			accEmail:'',
			ext: {
			}
		}
	})
	const createDefaultCardForm = ref({
	  ifsc: null,
	  holder_name: null,
	  account_num: null,
	  country:1,
	  ac_type: 1,
	  platform:uni.getStorageSync('platform'),
	  ext: { accEmail: null }
	})
	const addBank = async () => {
		if (!baseData.cardForm?.ifsc || baseData.cardForm.ifsc.length !== 11) {
		  uni.showToast({
		    title: t('IFSC code must be exactly 11 characters'),
		    icon: "none"
		  });
		  return;
		}

		if (baseData.cardForm?.ifsc.charAt(4)!=0) {
			uni.showToast({
				title: t('The ffth digit of IFSC code is fixed as 0'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.ifsc) {
			uni.showToast({
				title: t('Please fill in') + 'ifsc',
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if(platformNum.value==7){
			if (!emailRegex.test(baseData.cardForm.accEmail)) {
				uni.showToast({
					title: t('Invalid Email Format'),
					icon: 'none',
				})
				return
			}
		}
		
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g,'');
		baseData.cardForm.country=1;
		baseData.cardForm.ac_type=1;
		baseData.cardForm.platform=uni.getStorageSync('platform');
		if(platformNum.value==7){
			Object.assign(
			  createDefaultCardForm.value,
			  (({ ac_type, country, holder_name, ifsc,acc_phone, account_num,platform }) =>
			    ({ ac_type, country, holder_name, ifsc,acc_phone, account_num,platform }))(baseData.cardForm)
			)
			
			// 2) （ ext.accEmail， accEmail）
			createDefaultCardForm.value.ext = {
			  ...(createDefaultCardForm.value.ext || {}),
			  accEmail: baseData.cardForm.accEmail ?? baseData.cardForm.accEmail ?? ''
			}
		}else{
			Object.assign(
			  createDefaultCardForm.value,
			  (({ ac_type, country, holder_name, ifsc, account_num,platform }) =>
			    ({ ac_type, country, holder_name, ifsc, account_num,platform }))(baseData.cardForm)
			)
		}
		   
		const res = await setBankCard(createDefaultCardForm.value)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
	const goWithdraw = () => {
		uni.reLaunch({
			url: '/pages/withdraw/index',
		})
	}
	const getCard = async () => {
		const ress = await bankCardInfo({country:1,platform:baseData.cardForm.platform})
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: '',
				holder_name: '',
				account_num: '',
			},
			baseData.cardForm.ext = baseData.cardForm.ext || {};
			baseData.cardForm.accEmail = baseData.cardForm.ext.accEmail ?? '';
			// console.log("baseData.cardForm**** ",baseData.cardForm )
		}
	}
	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'task!' + t('Earn money so easy') + '!' // 
		});
		platformNum.value=uni.getStorageSync('platform');
		getCard()
	});
</script>

<style lang="scss" scoped>
	
	.content {
		width: 100%;
		background: #F1F1EF;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.body {
		width: 100%;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.top {
		border-radius: 1.4rem 1.4rem 0 0;
		padding-top: 50px;
		// background: linear-gradient(to right, #FE8400, #FF5800);
		background: #ffffff;
		;
		background-size: 100% 130%;
		display: flex;
		flex-flow: column;
	}

	
	.custom-input {
		width: 100%;
		border: none;
		color: #333;
		box-shadow: none;
		outline: none;
	}

	.custom-input:focus {
		border-bottom: 2px solid #ff5800;
	}


	

</style>